<head>
<meta charset="UTF-8">

    <title>[title]</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="__STATIC__/um/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    <link href="__STATIC__/css/comment.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="__STATIC__/um/third-party/jquery.min.js"></script>
    <script type="text/javascript" src="__STATIC__/um/third-party/template.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="__STATIC__/um/umeditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="__STATIC__/um/um.min.js"></script>
    <script type="text/javascript" src="__STATIC__/um/lang/zh-cn/zh-cn.js"></script>
    <link rel="stylesheet" href="__STATIC__/css/flat-ui.min.css"/>
    <link rel="stylesheet" href="__STATIC__/css/backstage.css">

    <link rel="stylesheet" href="__STATIC__/css/jMenu.jquery.css" type="text/css" />
    <script type="text/javascript" src="__STATIC__/js/jMenu.jquery.js"></script>

    <style type="text/css">
        #fireworks {
            position: fixed;
            top: 0px;
            z-index: 9999;
        }
        #im {
            position: absolute;
            width: 66px;
        }
/****************滚动*********************************/
        li{
            list-style: none;
        }
        .box{
            width:210px;
            height:266px;
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size:100% 100%;
            position: absolute;
            /*margin-left: 58%;*/
            right: 4%;
            top: 21%;
            /*margin-top: 10%;*/
            transform-style:preserve-3d;
            transform:rotateX(13deg);
            animation:move 30s linear infinite;
        }
        .minbox{
            width:200px;
            height:200px;
            position: absolute;
            left:50px;
            top:30px;
            transform-style:preserve-3d;
        }
        .minbox li{
            width:100px;
            height:100px;
            position: absolute;
            text-align: center;
            left:0;
            top:0;
            transition:all 2s ease;
        }
        .maxbox{
            width: 800px;
            height: 400px;
            position: absolute;
            left: 0;
            top: -20px;
            transform-style: preserve-3d;

        }
        .maxbox li{
            width: 200px;
            height: 200px;
            background: #fff;
            border:0px solid #ccc;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0.3;
            transition:all 3s ease;
        }
        .minbox li:nth-child(1){
            background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570182782452&di=77598776a6a540f2c2b86801ca169969&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb3f3f1ae74213661504ea0872d70ca933be63d97.gif) no-repeat center center;
            transform:rotateX(0deg) translateZ(50px);
        }
        .minbox li:nth-child(2){
            background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570182782452&di=77598776a6a540f2c2b86801ca169969&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb3f3f1ae74213661504ea0872d70ca933be63d97.gif) no-repeat center center;
            transform:rotateY(180deg) translateZ(50px);

        }
        .minbox li:nth-child(3){
            background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570182782452&di=77598776a6a540f2c2b86801ca169969&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb3f3f1ae74213661504ea0872d70ca933be63d97.gif) no-repeat center center;
            transform:rotateX(-90deg) translateZ(50px);
        }
        .minbox li:nth-child(4){
            background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570182782452&di=77598776a6a540f2c2b86801ca169969&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb3f3f1ae74213661504ea0872d70ca933be63d97.gif) no-repeat center center;
            transform:rotateX(90deg) translateZ(50px);
        }
        .minbox li:nth-child(5){
            background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570182782452&di=77598776a6a540f2c2b86801ca169969&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb3f3f1ae74213661504ea0872d70ca933be63d97.gif) no-repeat center center;
            transform:rotateY(-90deg) translateZ(50px);
        }
        .minbox li:nth-child(6){
            background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570182782452&di=77598776a6a540f2c2b86801ca169969&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb3f3f1ae74213661504ea0872d70ca933be63d97.gif) no-repeat center center;
            transform:rotateY(90deg) translateZ(50px);
        }
        .maxbox li:nth-child(1){
            background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570182782452&di=77598776a6a540f2c2b86801ca169969&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb3f3f1ae74213661504ea0872d70ca933be63d97.gif) no-repeat center center;
            transform:rotateX(0deg) translateZ(50px);
        }
        .maxbox li:nth-child(2){
            background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570182782452&di=77598776a6a540f2c2b86801ca169969&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb3f3f1ae74213661504ea0872d70ca933be63d97.gif) no-repeat center center;
            transform:rotateY(180deg) translateZ(50px);
        }
        .maxbox li:nth-child(3){
            background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570182782452&di=77598776a6a540f2c2b86801ca169969&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb3f3f1ae74213661504ea0872d70ca933be63d97.gif) no-repeat center center;
            transform:rotateX(-90deg) translateZ(50px);
        }
        .maxbox li:nth-child(4){
            background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570182782452&di=77598776a6a540f2c2b86801ca169969&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb3f3f1ae74213661504ea0872d70ca933be63d97.gif) no-repeat center center;
            transform:rotateX(90deg) translateZ(50px);
        }
        .maxbox li:nth-child(5){
            background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570182782452&di=77598776a6a540f2c2b86801ca169969&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb3f3f1ae74213661504ea0872d70ca933be63d97.gif) no-repeat center center;
            transform:rotateY(-90deg) translateZ(50px);
        }
        .maxbox li:nth-child(6){
            background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570182782452&di=77598776a6a540f2c2b86801ca169969&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb3f3f1ae74213661504ea0872d70ca933be63d97.gif) no-repeat center center;
            transform:rotateY(90deg) translateZ(50px);
        }

        .maxbox li:nth-child(1){
            transform:translateZ(100px);
        }
        .maxbox li:nth-child(2){
            transform:rotateY(180deg) translateZ(100px);
        }
        .maxbox li:nth-child(3){
            transform:rotateX(-90deg) translateZ(100px);
        }
        .maxbox li:nth-child(4){
            transform:rotateX(90deg) translateZ(100px);
        }
        .maxbox li:nth-child(5){
            transform:rotateY(-90deg) translateZ(100px);
        }
        .maxbox li:nth-child(6){
            transform:rotateY(90deg) translateZ(100px);
        }
        .box:hover ul li:nth-child(1){
            transform:translateZ(100px);
            width: 200px;
            height: 200px;
            opacity: 0.8;
            left: -50px;
            top: -50px;
        }
        .box:hover ul li:nth-child(2){
            transform:rotateY(180deg) translateZ(100px);
            width: 200px;
            height: 200px;
            opacity: 0.8;
            left: -50px;
            top: -50px;
        }
        .box:hover ul li:nth-child(3){
            transform:rotateX(-90deg) translateZ(100px);
            width: 200px;
            height: 200px;
            opacity: 0.8;
            left: -50px;
            top: -50px;
        }
        .box:hover ul li:nth-child(4){
            transform:rotateX(90deg) translateZ(100px);
            width: 200px;
            height: 200px;
            opacity: 0.8;
            left: -50px;
            top: -50px;
        }
        .box:hover ul li:nth-child(5){
            transform:rotateY(-90deg) translateZ(100px);
            width: 200px;
            height: 200px;
            opacity: 0.8;
            left: -50px;
            top: -50px;
        }
        .box:hover ul li:nth-child(6){
            transform:rotateY(90deg) translateZ(100px);
            width: 200px;
            height: 200px;
            opacity: 0.8;
            left: -50px;
            top: -50px;
        }
        .box:hover ol li:nth-child(1){
            transform:translateZ(300px);
            width: 400px;
            height: 400px;
            opacity: 0.8;
            left: -100px;
            top: -100px;
        }
        .box:hover ol li:nth-child(2){
            transform:rotateY(180deg) translateZ(300px);
            width: 400px;
            height: 400px;
            opacity: 0.8;
            left: -100px;
            top: -100px;
        }
        .box:hover ol li:nth-child(3){
            transform:rotateX(-90deg) translateZ(300px);
            width: 400px;
            height: 400px;
            opacity: 0.8;
            left: -100px;
            top: -100px;
        }
        .box:hover ol li:nth-child(4){
            transform:rotateX(90deg) translateZ(300px);
            width: 400px;
            height: 400px;
            opacity: 0.8;
            left: -100px;
            top: -100px;
        }
        .box:hover ol li:nth-child(5){
            transform:rotateY(-90deg) translateZ(300px);
            width: 400px;
            height: 400px;
            opacity: 0.8;
            left: -100px;
            top: -100px;
        }
        .box:hover ol li:nth-child(6){
            transform:rotateY(90deg) translateZ(300px);
            width: 400px;
            height: 400px;
            opacity: 0.8;
            left: -100px;
            top: -100px;
        }
        @keyframes move{
            from {
                transform: rotateX(13deg) rotateY(360deg) rotateZ(0deg);
            }
            to {
                transform: rotateX(13deg) rotateY(0deg) rotateZ(0deg);
            }
        }

        .traderAlert {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .traderAlert .container3 {
            display: flex;
            flex-direction: column;
            padding: 20px;
            width: 500px;
            background-color: #ed2157;
            border-radius: 5px;
            align-items: center;
        }

        .traderAlert .container3 .box03 {
            margin-top: 20px;
            width: 150px;
            display: flex;
            justify-content: space-around;
        }

        .traderAlert .container3 .box01,
        .traderAlert .container3 .box02 {
            width: 450px;
            display: flex;
            /* justify-content: space-between; */
        }

        .traderAlert .container3 .box01 {
            align-items: center;
        }
        /*修改提示框*/
        #mytitle {
            position: absolute;
            color: #ffffff;
            max-width: 160px;
            font-size: 14px;
            padding: 4px;
            background: rgba(40, 40, 40, 0.8);
            border: solid 1px #e9f7f6;
            border-radius:5px;
        }

</style>
</head>